<template>
  <div class="control-bar clearfix">
    <div class="header-line pos-rel display-flex">
      <i
        :class="{ 'mb-nav-open':mbNavIsOpen }"
        class="el-icon-d-arrow-right margin-r-10 mb-menu cursor-pointer pos-rel"
        @click="toggleMbNav()" />
      <el-menu
        default-active="1"
        mode="horizontal"
        size="medium">
        <el-menu-item index="1">
          <a class="font-bold font-s-12">&nbsp;&nbsp;<i class="fah font-18 menu-icon el-icon-mobile-phone" />技术&nbsp;&nbsp;</a>
        </el-menu-item>
        <el-menu-item index="2">
          <a class="font-bold font-s-12">&nbsp;&nbsp;<i class="fah font-18 menu-icon el-icon-goods" />订单&nbsp;&nbsp;</a>
        </el-menu-item>
        <el-menu-item index="3">
          <a class="font-bold font-s-12">&nbsp;&nbsp;<i class="fah font-18 menu-icon el-icon-message" />平台&nbsp;&nbsp;</a>
        </el-menu-item>
        <el-menu-item index="4">
          <a class="font-bold font-s-12">&nbsp;&nbsp;<i class="fah font-18 menu-icon el-icon-printer" />财务&nbsp;&nbsp;</a>
        </el-menu-item>
        <el-menu-item index="5">
          <a class="font-bold font-s-12">&nbsp;&nbsp;<i class="fah font-18 menu-icon el-icon-service" />客服&nbsp;&nbsp;</a>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      mbNavIsOpen: state => state.common.mbNavIsOpen
    })
  },
  methods: {
    toggleMbNav () {
      this['common/toggleMbNav']()
    },
    ...mapMutations([
      'common/toggleMbNav'
    ])
  }
}
</script>

